<template>
  <el-aside>
    <el-menu :default-openeds="['1']"
      mode="vertical"
      unique-opened
      router
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-submenu v-for="menuItem in menu" v-bind:key="menuItem.path" :index="menuItem.path">
        <template slot="title">
          <i :class="menuItem.icon"></i>{{ menuItem.name }}
        </template>
        <el-menu-item-group>
        <el-menu-item v-for="subItem in menuItem.children" v-bind:key="subItem.path" :index="subItem.path">
          <i :class="subItem.icon"></i>
          <span slot="title">{{ subItem.name }}</span>
        </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </el-aside>
</template>

<script>
const Menu = require('../config/menu.json')

export default {
  name: 'CMenu',
  data () {
    return {
      menu: Menu
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-aside {
  display: block;
  position: relative;
  overflow-y: scroll;
  background-color: #324157 !important;
}
</style>
